<template>
  <div class="preview">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :visible.sync="YtDialogVisible"
      width="300px"
      @close="YtMsgDialogClose"
      :close-on-click-modal="false"
      center
    >
      <el-form :model="Ytform" size="mini" ref="YtMsgForm" :rules="rules">
        <el-form-item label="目标" label-width="70px" prop="valueList">
          <!-- <el-input
            style="width: 100%"
            v-model="Ytform.name"
            disabled
          ></el-input> -->
          <el-select
            class="custom-select"
            :popper-append-to-body="false"
            v-model="valueList"
            multiple
            clearable
            placeholder="请选择要操作的矩阵"
            @change="selectAllChange"
            @remove-tag="removeTag"
          >
            <el-option label="全部" value="all" />
            <el-option
              v-for="item in SelectListAll"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="遥调值" label-width="70px" prop="ctrl_value">
          <el-select
            v-model="Ytform.ctrl_value"
            placeholder="请选择"
            v-if="OptionSelect"
            style="width: 100%"
            @change="selectChange"
          >
            <el-option
              v-for="item in OptionSelectList"
              :key="item.value"
              :label="item.caption"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            v-else
            type="number"
            style="width: 100%"
            v-model="Ytform.ctrl_value"
            :min="minValue"
            :max="maxValue"
            @input="handleInput"
            placeholder="请输入遥调值"
            autofocus
          ></el-input>
        </el-form-item>
        <el-form-item label="超时(秒)" label-width="70px" prop="ctrl_timeout">
          <el-input
            type="number"
            style="width: 100%"
            v-model="Ytform.ctrl_timeout"
          ></el-input>
        </el-form-item>
        <el-form-item label="控制密码" label-width="70px" prop="ctrl_pwd">
          <el-input
            show-password
            style="width: 100%"
            v-model="Ytform.ctrl_pwd"
          ></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button
            size="mini"
            :disabled="YTbuttonDisabled"
            round
            type="success"
            @click="doYT(2)"
            >执行</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  setMessageCallback,
  removeMessageCallback,
  getGuid32,
  publishMsg,
  checkSpecialId,
} from "@/mqtt";
import "@/utils/dialog";
export default {
  name: "YTdialog",
  data() {
    return {
      YtDialogVisible: false, //遥调弹窗
      Ytform: {
        name: "",
        ctrl_value: "",
        ctrl_timeout: 10,
        ctrl_pwd: "",
      },
      YtMsgFrom: {
        id: "",
        gw_sn: "",
        ctrl_id: "",
        ctrl_uuid: "",
        ctrl_type: 1,
      },
      buttonDisabled: true,
      YTbuttonDisabled: false,
      uuid: "",
      mySpecialId: "",
      minValue: "",
      maxValue: "",
      OptionSelect: false,
      OptionSelectList: [],
      SelectListAll: [], //多选框
      valueList: [], // 多选框选中的值
      dialogTitle: "",
      rules: {
        ctrl_value: [
          { required: true, message: "必填", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // console.log(this.minValue, this.maxValue);

              const minValueDefined = typeof this.minValue !== "undefined";
              const maxValueDefined = typeof this.maxValue !== "undefined";

              if (minValueDefined && value < this.minValue) {
                this.YTbuttonDisabled = true;
                return callback(new Error(`最小值为${this.minValue}`));
              }

              if (maxValueDefined && value > this.maxValue) {
                this.YTbuttonDisabled = true;
                return callback(new Error(`最大值为${this.maxValue}`));
              }

              this.YTbuttonDisabled = false;
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
  mounted() {
    setMessageCallback(this.onMessage);
  },

  methods: {
    onMessage(topic, msg) {
      //console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1013:
          {
            switch (msg.funCode) {
              case 2:
                if (checkSpecialId(msg)) {
                  if (msg.retCode != 0) {
                    this.$message.error(msg.retMsg);
                    this.YTbuttonDisabled = false;
                  } else {
                    this.uuid = this.YtMsgFrom.ctrl_uuid;
                    if (this.uuid == msg.data.ctrl_uuid) {
                      switch (msg.data.ctrl_step) {
                        case 2:
                          this.$message.success("执行操作已执行!");
                          this.YTbuttonDisabled = false;
                          this.YtDialogVisible = false;
                          break;
                      }
                    }
                  }
                }
                break;
            }
          }
          break;
        default:
          break;
      }
    },
    Ytdialog(val) {
      // console.log(val);
      this.dialogTitle = val.name;
      this.YtDialogVisible = true;
      this.Ytform.name = val.name;
      this.YtMsgFrom.id = val.id;
      // this.YtMsgFrom.gw_sn = val.gw_sn;
      // this.YtMsgFrom.ctrl_id = val.id;
      this.YtMsgFrom.ctrl_uuid = getGuid32();
      this.minValue = val.min;
      this.maxValue = val.max;
      this.YTbuttonDisabled = true;
      if (val.hasOwnProperty("enum") && val.enum.length > 0) {
        this.OptionSelect = true;
        this.OptionSelectList = val.enum;
      } else {
        this.OptionSelect = false;
        this.OptionSelectList = [];
      }
      if (val.hasOwnProperty("gwList") && val.gwList.length > 0) {
        // this.OptionSelect = true;
        this.SelectListAll = val.gwList;
      } else {
        // this.OptionSelect = false
        this.SelectListAll = [];
      }
    },

    doYT(val) {
      this.$refs.YtMsgForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          // console.log(this.valueList, "全选值");
          // console.log(this.SelectListAll, "下拉框的值");
          if (this.valueList.length > 0) {
            for (let i = 0; i < this.valueList.length; i++) {
              // const element = array[index];
              let newMsg = {
                webMsgType: 1013,
                funCode: 2,
              };
              let obj = {
                ctrl_step: val,
                ctrl_value: Number(this.Ytform.ctrl_value),
                ctrl_timeout: this.Ytform.ctrl_timeout,
                ctrl_pwd: this.Ytform.ctrl_pwd,
              };
              this.YtMsgFrom.gw_sn = this.valueList[i];
              for (let k = 0; k < this.SelectListAll.length; k++) {
                // console.log(this.SelectListAll[k].value,this.valueList[i])
                if (this.valueList[i] == this.SelectListAll[k].value) {
                  this.YtMsgFrom.ctrl_id = this.SelectListAll[k].data.id;
                  this.YtMsgFrom.id = this.SelectListAll[k].data.id;
                }
                break;
              }
              newMsg.data = { ...obj, ...this.YtMsgFrom };
              // console.log(newMsg);
              publishMsg(newMsg);
            }
            this.YTbuttonDisabled = true;
            this.$message.success("遥调信息已下发，等待返回~~~");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    YtMsgDialogClose() {
      this.$refs.YtMsgForm.resetFields();
      this.valueList = [];
      this.buttonDisabled = true;
    },
    selectChange() {
      this.YTbuttonDisabled = false;
    },
    // 点击选项删除按钮时
    removeTag(val) {
      if (val == "all") {
        this.valueList = [];
      }
    },
    selectAllChange(value, option) {
      // const { data } = option;
      // this.YtMsgFrom.ctrl_id = val.id
      // console.log(value, "多选框命中");
      if (value.includes("all")) {
        this.valueList = this.SelectListAll.map((option) => option.value);
      } else {
        this.valueList = value.filter((val) => val !== "all");
      }
    },
    // selectAll(val) {
    //   if (this.form.syslogType.length < this.openList.length) {
    //     // 非全选时，点击选择全部
    //     this.form.syslogType = this.openList.map((item) => {
    //       return item.id;
    //     });
    //     this.form.syslogType.unshift("-1");
    //   } else {
    //     // 全选时，点击置空
    //     this.form.syslogType = [];
    //   }
    // },
    handleInput(val) {
      // console.log("遥调", val);
      // console.log(this.minValue, this.maxValue);
      // if (val < this.minValue) {
      //   this.Ytform.ctrl_value = this.minValue;
      //   return this.$message.warning(`最小值为${this.minValue}`);
      // } else if (val > this.maxValue) {
      //   this.Ytform.ctrl_value = this.maxValue;
      //   return this.$message.warning(`最大值为${this.maxValue}`);
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .dialog-footer .el-form-item__content {
  display: flex;
  justify-content: center;
}
// ::v-deep .el-select-dropdown {
//   min-width: 180px;
//   transform-origin: center top;
//   z-index: 2252;
//   position: fixed;
//   top: 190px;
//   left: 1100px !important;
// }
::v-deep .custom-select .el-select-dropdown {
  position: absolute !important;
  top: 0px !important;
  // left: 100%;
  transform: translateX(100%) !important;
  .popper__arrow {
    left: 0px !important;
  }
}
</style>
